<template>
  <div>
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      :show-close="false"
      width="600px"
    >
      <el-form
        ref="accountDialog"
        :model="row"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="登录账号:" prop="tel" style="width: 350px;">
          <el-input
            v-model="row.tel"
            size="medium"
            placeholder="请输入登录账号"
          />
        </el-form-item>
        <el-form-item label="密码:" prop="password" style="width: 350px;" :required="row.id ? false : true">
          <el-input
            v-model="row.password"
            size="medium"
            placeholder="请输入密码"
          />
          <div v-if="row.id" style="color: red">提示：如不需要修改密码时可不填！</div>
          <!-- <div v-if="row.password === password" style="color: red">展示的为加密后的密码</div> -->
        </el-form-item>
        <el-form-item label="确认密码:" prop="cpassword" style="width: 350px;" :required="row.id ? false : true">
          <el-input
            v-model="row.cpassword"
            size="medium"
            placeholder="请输入确认密码"
          />
        </el-form-item>
        <el-form-item label="姓名:" prop="uname" style="width: 350px;">
          <el-input
            v-model="row.uname"
            size="medium"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item label="所属角色:" prop="role">
          <el-select v-model="row.role" placeholder="请选择" clearable>
            <el-option
              v-for="item in RoleTableData()"
              :key="item.role"
              :label="item.gname"
              :value="item.role"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="所属地区:" prop="address" style="width: 350px;">
          <el-input
            v-model="row.address"
            size="medium"
            placeholder="请输入所属地区"
          />
        </el-form-item> -->
        <el-form-item label="是否开启:" prop="openState" style="width: 350px;">
          <el-switch v-model="row.openState" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from '@/mixin/mixin'

export default {
  name: 'AccountDialog',
  mixins: [mixin],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default() {
        return {}
      }
    },
    password: {
      type: String,
      default: ''
    }
  },
  data() {
    const validatePass = (rule, value, callback) => {
      this.checkPass(rule, value, callback)
    }
    var validatePass2 = (rule, value, callback) => {
      this.checkCpassword(rule, value, callback)
    }
    return {
      title: '',
      rules: {
        tel: [
          {
            required: true,
            message: '登录账号不能为空',
            trigger: 'blur'
          }
        ],
        password: [
          {
            // required: true,
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        cpassword: [
          {
            // required: true,
            validator: validatePass2,
            trigger: 'blur'
          }
        ],
        uname: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }
        ],
        role: [
          {
            required: true,
            message: '请选择所属角色',
            trigger: 'change'
          }
        ]
      }
    }
  },
  updated() {
    if (this.row.id) {
      this.title = '编辑账户'
    } else {
      this.title = '新增账户'
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel-dialog')
      this.$refs.accountDialog.resetFields()
    },
    handleConfirm() {
      this.$refs.accountDialog.validate((valid) => {
        if (valid) {
          this.$emit('confirm-dialog', {
            // dialog: this.$refs.garageDialog,
            id: this.row.id,
            tel: this.row.tel,
            password: this.row.password !== this.password ? this.row.password : '',
            uname: this.row.uname,
            role: this.row.role,
            pid: 0,
            // address: this.row.address,
            state: this.row.openState === true ? 0 : 1
          })
          this.$refs.accountDialog.resetFields()
        } else {
          return false
        }
      })
    },
    checkPass(rule, value, callback) {
      if (this.row.id) {
        callback()
      } else {
        if (!value) {
          callback(new Error('请输入密码'))
        } else {
          if (this.row.cpassword !== '') {
            this.$refs.accountDialog.validateField('cpassword')
          }
          callback()
        }
      }
    },
    checkCpassword(rule, value, callback) {
      if (this.row.id) {
        if (this.row.password && !value) {
          callback(new Error('请再次输入密码'))
        }
        if (value !== this.row.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      } else {
        if (!value) {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.row.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      }
    }
  }
}
</script>

<style>
</style>
